<template>
  <div class="setting-panel-container">
    <v-container>
      <v-row>
        <v-col
          cols="12"
          md="4">
          <v-btn
            v-for="t in types"
            :key="t"
            class="my-4"
            block depressed
            @click="type = t"
          >
            {{ t }}
          </v-btn>
          <v-sheet
            dark
            class="pa-4"
          >
            <pre>设置主题颜色</pre>
            <pre>{{ showColor }}</pre>
          </v-sheet>
        </v-col>
        <v-col
          class="d-flex justify-center"
        >
          <v-color-picker v-model="color" mode="hexa" hide-inputs @input="handleColorSelected"></v-color-picker>
        </v-col>
        <v-col
          cols="12"
          md="4"
        >
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
    export default {
        name: "settingPanel",
        data() {
            return {
                customerColor: {},
                selectedColor: '',
                types: ['hex', 'hexa'],
                type: 'hex',
                hex: '#FF00FF',
                hexa: '#FF00FFFF'
            }
        },
        methods: {
            handleColorSelected(color) {
                this.selectedColor = color.hexa;
            }
        },
        computed: {
            color: {
                get () {
                    return this[this.type]
                },
                set (v) {
                    this[this.type] = v
                },
            },
            showColor () {
                if (typeof this.color === 'string') return this.color

                return JSON.stringify(Object.keys(this.color).reduce((color, key) => {
                    color[key] = Number(this.color[key].toFixed(2))
                    return color
                }, {}), null, 2)
            },
        },
        watch: {
            color(nval) {
                document.getElementsByTagName('body')[0].style.setProperty('--custom-color', nval);
                this.$emit('colorChange', nval);
                sessionStorage.setItem('custom-color', nval);
            }
        },
        created() {
            this.color = sessionStorage.getItem('custom-color') ?? '#4746a3';
            document.getElementsByTagName('body')[0].style.setProperty('--custom-color', this.color);
            this.$emit('colorChange', this.color);
            this.$forceUpdate();
            // this.color = document.getElementsByTagName('body')[0].style.getPropertyValue('--custom-color') ?? '#4746a3';
        }
    }
</script>

<style lang="scss" scoped>
  @import 'settingPanel';
</style>